<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
js方式:
<table id="dg"></table>
<script type="text/javascript">
	var editIdx = -1;  //编辑行索引
	$('#dg').datagrid({    
	    url:'../data/user.json',    //数据来源
	    columns:[[    				 //展示数据
	        {field:'id',title:'编号',width:100},   //列属性 
	        {field:'name',title:'姓名',width:100,editor:{
	        	type:"validatebox",  //编辑类型 validatebox 普通输入框
	        	options:{required:true}   //必填项
	        }},    
	        {field:'age',title:'年龄',width:100,align:'right',editor:{
	        	type:'numberbox',  
				options:{}  //必填项
	        }}    
	    ]],
	    pagination:true //加入分页栏        page（当前页） rows(页大小)
	  	//加入分页组件后，响应数据格式要求： json对象（total总记录，rows当前页记录）
	  	/*
		 {
			"total":200,
			"rows":[{},{},{}]
		 }
		*/
	  	,toolbar: [{ //加入工具栏
	  				iconCls: 'icon-add',
					text:'新增',
					handler: function(){
						 $("#dg").datagrid("insertRow",{
							 index:0,
							 row:{
								 /* id:111,
								 name:'jack',
								 age:14 */
							 }
						 }),
						 $("#dg").datagrid("beginEdit", 0),
						 editIdx=0
						 
					}
				},{  
			  		iconCls: 'icon-edit',
			  		text:'修改',
					handler: function(){
						 var rows = $("#dg").datagrid("getSelections");
						  //动态获取选中编辑行索引
						 var idx =  $("#dg").datagrid("getRowIndex", rows[0]);
						 //调用datagrid数据表格方法，开始编辑某一条记录
						 $("#dg").datagrid("beginEdit",idx);
						 editIdx = idx;
					}
				},{
					iconCls: 'icon-help',
					text:'帮助',
					handler: function(){
						alert('help')
					}
				},{
					iconCls: 'icon-save',
					text:'保存',
					handler: function(){
						 //结束编辑方法，结束编辑事件会自动触发
						 $("#dg").datagrid("endEdit",editIdx);
					}
				},{
					iconCls: 'icon-delete',
					text:'删除',
					handler: function(){
						var rows = $("#dg").datagrid("getSelections");
						//动态获取选中编辑行索引
						for (var i=0;i<rows.length;i++) {
							var idx =  $("#dg").datagrid("getRowIndex", rows[i]);
							//结束编辑方法，结束编辑事件会自动触发
							$("#dg").datagrid("deleteRow",idx);
						}
						
					}
				}]	
	,striped:true
	,rownumbers:true
	//,singleSelect:true
	//,pageNumber:2
	,pageSize:6
	,pageList:[5,6,7],
	onAfterEdit:function(rowIndex, rowData, changes){   //调用endedit方法触发
//		rowIndex: 编辑行索引,从0
//		rowData: 对应的记录编辑行
//		changes: 更改的字段/值对
		console.info(rowData);
		$.post("userAction_updata.action", rowData, function(data){
			
		})
	}


	    
	}); 
</script>




</body>
</html>